import { View } from '@tarojs/components';
import s from './index.module.scss'
import { useRef, useState } from 'react';
import ScrollBar from 'components/ScrollBar'
import Switch from 'components/Switch'
import RadioButton from 'components/RadioButton'
import classNames from 'classnames';


export default function Index() {
  const [active, setActive] = useState(false)
  const [arr, setArr] = useState<any[]>([0])
  const [current, setCurrent] = useState(1)
  const select = useRef(false)

  function disableBtn(state: boolean) {
    select.current = state
  }
  
  const onChange = (number: number) => {
    var _arr = Object.keys(Array.from({length: number}))
    setArr(_arr)
    setCurrent(number)
  }

  const _target = classNames(s.target, {
    [s.active]: active
  })
  
  return (
    <View className={s.wrapper}>
      <View className={s.container}>
        <ScrollBar title='分割列数' minNum={1} maxNum={5} onChange={onChange}  text_color={'#000'}/>
        <View className={active ? `${s.playground} ${s.active}` : s.playground}>
          {/* 上层 */}
          <View 
            id={s.over}
            className={_target}
            style={{ gridTemplateColumns: `repeat(${current}, 1fr)` }}
          >
            {arr.map((item) => (
              <View key={item} className={s.box_out}>
                <div className={s.box_inner}>{item}</div>
              </View>
            ))} 
          </View>
          {/* 下层 */}
          <View
            id={s.under}
            className={_target}
            style={{ gridTemplateColumns: `repeat(${current}, 1fr)` }}
          >
            {arr.map((item) => (
              <View key={item} className={s.box_out}>
                <div className={s.box_inner}>{item}</div>
              </View>
            ))}
          </View>
          
          
        </View>
        <Switch text='展示' state={active} onClick={() => select.current ? undefined : setActive(!active)} />
      </View>
      <RadioButton text='禁用按钮' onChange={disableBtn}/>
    </View> 
  )
}
